light mode
night mode
On This Page

সিএসএস প্যাডিং (CSS Padding)

Web Development - সিএসএস (CSS) - সিএসএস ব্যাসিক(CSS Basic) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

সিএসএস প্যাডিং

বর্ডারের ভিতরে এবং কন্টেন্টের(content) চারপাশে ফাঁকা স্থান তৈরি করার জন্য সিএসএস Padding প্রোপার্টিটি ব্যবহার করা হয়।

Padding প্রোপার্টিটি একটি এলিমেন্টের মধ্যে কন্টেন্টের চারপাশে(বর্ডার এর মধ্যে) ফাঁকা জায়গা তৈরি করে।

সিএসএসের মাধ্যমে আপনি প্যাডিংকে সম্পূর্ণভাবে নিয়ন্ত্রন করতে পারেন। সিএসএস Padding প্রোপার্টি দ্বারা আপনি একটি এলিমেন্টের প্রত্যেক পাশে যেমন- top, right, bottom এবং left এ পৃথকভাবে প্যাডিং সেট করতে পারেন।

       

                           এই এলিমেন্টেটির চারপাশে 50px প্যাডিং ব্যবহার করা হয়েছে।

 

 

 

এক নজরে সিএসএস প্যাডিং প্রোপার্টিসমূহ

padding

একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো প্যাডিং প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি।

padding-top

এলিমেন্টের উপরের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

padding-right

এলিমেন্টের ডানের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

padding-bottom

এলিমেন্টের নিচের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

padding-left

এলিমেন্টের বামের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

 

পৃথক পৃথক প্যাডিং প্রোপার্টিসমূহ

একটি এলিমেন্টের কন্টেন্টের চারপাশে প্যাডিং সেট করার জন্য সিএসএসে ভিন্ন ভিন্ন প্যাডিং প্রোপার্টি রয়েছে। এগুলো হলোঃ

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

সবগুলো মার্জিন প্রোপার্টি নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ

  • auto- ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।
  • length- px, pt, cm, ইত্যাদি একক ব্যবহার করে মার্জিন সেট করা হয়
  • % - সংশ্লিষ্ট এলিমেন্টের প্রস্থ(width) অনুযায়ী মার্জিন সেট করা হয়।
  • inherit- প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।


নিচের উদাহরণে

<p></code><span style="background-color:rgb(255,255,255);color:rgb(0,0,0);"> এলিমেন্টের প্রত্যেক পাশে বিভিন্ন প্রকার প্যাডিং এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=455

 

প্যাডিং - শর্টহ্যান্ড প্রোপার্টি

কোড সংক্ষিপ্ত করার জন্য সকল প্যাডিং প্রোপার্টিকে একটি শর্টহ্যান্ডশর্টহ্যান্ড প্রোপার্টির মাধ্যমে প্রকাশ করা সম্ভব।

নিচের পৃথক পৃথক প্যাডিং প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো padding প্রোপার্টিঃ

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

 

      kt_satt_skill_example_id=462


উপরের উদাহরণটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ

যদি padding প্রোপার্টিতে চারটি ভ্যালু থাকেঃ

  • উপরের প্যাডিং হবে 50px।
  • ডানের প্যাডিং হবে 40px।
  • নিচের প্যাডিং হবে 80px।
  • বামের প্যাডিং হবে 70px।

যদি padding প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ

  • উপরের প্যাডিং হবে 50px।
  • ডানের ও বামের প্যাডিং হবে 40px।
  • নিচের প্যাডিং হবে 80px।

যদি padding প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ

  • উপরের এবং নিচের প্যাডিং হবে 50px।
  • ডানের এবং বামের প্যাডিং হবে 80px।

যদি padding প্রোপার্টিতে একটি ভ্যালু থাকেঃ

  • চারপাশের প্যাডিংই হবে 50px।

kt_satt_skill_example_id=465

 

Content added || updated By
Nayan Islam

আরও দেখুন...

সিএসএস প্যাডিং (CSS Padding)

On This Page

Promotion

Promotion